<template>
    <div class="tab">
        <!-- <head-modify :keyText="keyText"></head-modify> -->
        <!-- <set-rich @event="getData" :pageParam="pageParam"></set-rich> -->

        <div class="header">
            <div class="header-tab"  :class="{'active':index == currentTab}" v-for="(item,index) in headerTab" :key="item+index" @click="clickTab(item,index)">{{item}}</div>
        </div>
        <div class="content"  ref="contentRef">
            <div class="outer-box" ref="boxRef">
                <div class="content-box" v-for="(item,index) in tabContent" :key="item+index" @click="clickTabContent(item)">
                    <div v-html="item"></div>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>

import { mapState,mapActions} from 'vuex'
    export default {
        name:'SetRichV2',
        props:{
            tempId:Number,
        },
        
        data() {
            return {
                richColor: "#f9f9f9",
                content: '' ,
                content1:'',
                imageDomaia:'http://wstore-1255653546.image.myqcloud.com',

                headerTab:['组合样式','标题','正文','表格','分割线','导航链接'],
                tabContent:[
                    '<div><p><span style="font-size: 32px;"><strong style="color:#000000">欧式印花布板</strong></span></p><p><br></p><p><span style="font-size: 20px;"><strong>产品信息</strong></span></p></div>',
                    '<div class="styleLibTplWrapper___uABlX  " data-index="0" data-type="title" data-theme-color="#EDEDED" data-change-color="on" data-analyze="27,300073" data-key="title-tpl73" data-is-vip="false"><div><section class="stylelib-wrapper" contenteditable="false" data-theme-color="#EDEDED" data-is-vip="false" data-change-color="on" data-key="title-tpl73"> <section class="x-vipIcon"> <section style="display:none;"></section> </section> <section style="display: flex; flex-flow: row nowrap;"> <section data-stylelib-stylename="background-color" style="display: inline-flex; vertical-align: top; width: auto; background-color: #EDEDED; min-width: 10%; max-width: 100%; flex: 0 0 auto; height: auto; padding: 0px 4px; align-self: stretch; justify-content: center; align-items: center;"> <section> <section> <section style="text-align: center; font-size: 20px !important; font-weight: bold; color: #000;" title="" contenteditable="undefined"> 01 </section> </section> </section> </section> <section data-stylelib-stylename="background-color" data-opacity-value="1/4" style="display: inline-block; vertical-align: top; width: auto; background-color: rgba(237, 237, 237, 0.25); flex: 100 100 0%; height: auto; align-self: stretch; border-width: 0px; border-radius: 0px; border-style: none; border-color: rgb(62, 62, 62);"> <section style="position: static;"> <section style="margin: 0px 0%; display: flex; flex-flow: row nowrap;"> <section style="display: inline-block; vertical-align: top; width: auto; flex: 100 100 0%; align-self: flex-start; height: auto; margin: 0px 0px 0px -1px; padding: 3px 5px 0px 10px;"> <section style="position: static;"> <section style="margin: 3px 0;"> <section data-stylelib-stylename="color" style="text-align: justify; line-height: 1.6; letter-spacing: 1px; padding: 0px; color:#000;" title="" contenteditable="undefined"> <p>编号标题</p> </section> </section> </section> </section> <section style="display: inline-block; vertical-align: top; width: auto; flex: 0 0 0%; align-self: flex-start; height: auto; margin: 0px; line-height: 1.8;"> <section style="position: static;"> <section style="text-align: right; font-size: 100%; justify-content: flex-end;"> <section data-stylelib-stylename="border-left-color" style="display: inline-block; width: 10px; height: 10px; vertical-align: top; overflow: hidden; border-left: 1px solid #EDEDED; border-bottom-left-radius: 100%; border-bottom: 1px solid#EDEDED; border-bottom-right-radius: 0px; background-color: rgb(255, 255, 255);"> <section style="position: static;"> <section style="text-align: right; font-size: 0%; justify-content: flex-end;"> <section data-stylelib-stylename="border-left-color" style="display: inline-block; width: 6px; height: 6px; vertical-align: top; overflow: hidden; border-left: 1px solid #EDEDED; border-bottom-left-radius: 100%; border-bottom: 1px solid#EDEDED; border-bottom-right-radius: 0px; background-color: rgb(255, 255, 255);"> <section style="display:none;"></section> </section> </section> </section> </section> </section> </section> </section> </section> </section> </section> </section></section></div></div>',
                    '<section style="padding: 0px 6px; margin-top: -3px; box-sizing: border-box; color: #5a5a5a; flex: 1;" contenteditable="undefined"> <p> 严格落实值班制度，制定完善开学准备工作方案、疫情防控应急预案、疫情报告制度、晨检制度。 </p> </section>',
                    '<div><table contenteditable="undefined" data-key="table-tpl1" class="stylelib-table" data-is-vip="undefined" style="font-size:14px;">  <thead> <tr>  <th style="font-size:16px;padding:8px;border:1px solid #e8e8e8;text-align:center;height:31px;background-color:#f0f2f5;color:rgba(0,0,0,0.85);" colspan="2"> 商品详情 </th>  </tr> </thead> <tbody>  <tr>  <td style="width:156px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> 规格 </td>  <td style="width:339px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> 220*210cm </td>  </tr>  <tr>  <td style="width:156px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> 厂商 </td>  <td style="width:339px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> 邻家网络科技有限公司 </td>  </tr>  <tr>  <td style="width:156px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> 热线 </td>  <td style="width:339px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> 400******* </td>  </tr>  <tr>  <td style="width:156px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> 价格 </td>  <td style="width:339px;padding:8px;border:1px solid #e8e8e8;background-color: #fff;min-width:50px;height:23px;"> ¥599 </td>  </tr>  </tbody> </table></div>',
                    '<div><section class="stylelib-wrapper" data-is-vip="undefined" data-change-color="on" data-theme-color="#EDEDED" contenteditable="false" data-key="divider-tpl4"> <section class="x-vipIcon"><section style="display:none;"></section></section> <section style="position:relative;padding:10px 0;text-align:center;"> <section data-stylelib-stylename="border-color" style="width:100%;height:0;border-bottom-width:1px;border-bottom-style:solid;border-color:#EDEDED;"></section> <section data-stylelib-stylename="border-color" style="width:100%;height:0;margin-top:3px;border-bottom-width:3px;border-bottom-style:solid;border-color:#EDEDED;"></section> </section></section></div>',
                    '<section data-id="127715" class="xmyeditor" data-type="lspecial02,lspecial04"><section style="text-align: center;background: #F3F8FF;padding-bottom: 30px;" class="xmy-banone"><section style="line-height:2px;"><img src="https://web2.xmyeditor.com/sucai-png/20221107/16ca5b107f673638c10e283470684cb9.png" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-png/20221107/16ca5b107f673638c10e283470684cb9.png"></section><section style="width:80px;line-height:2px;margin-left: 30%;margin-bottom: -25px;margin-top: -30px;"><img src="https://web2.xmyeditor.com/sucai-gif/20221107/3718c70fb59eb5c282850376a96cc69c.gif" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-gif/20221107/3718c70fb59eb5c282850376a96cc69c.gif"></section><section style="width:45px;margin: 0 45px -10px auto;line-height:2px;"><img src="https://web2.xmyeditor.com/sucai-gif/20221107/26d5ecad344219bd9aa36259d201ffcc.gif" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-gif/20221107/26d5ecad344219bd9aa36259d201ffcc.gif"></section><section style="display: inline-block;"><section style="width:50px;line-height:2px;margin-left: -30px;margin-bottom: -50px;"><img src="https://web2.xmyeditor.com/sucai-gif/20221107/dc1e695b14ad850c35fbf8d961e68540.gif" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-gif/20221107/dc1e695b14ad850c35fbf8d961e68540.gif"></section><section style="width:90px;margin: 0 auto -29px;line-height:2px;"><img src="https://web2.xmyeditor.com/sucai-png/20221107/cebaec78c3a5bad993d566155ce75f00.png" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-png/20221107/cebaec78c3a5bad993d566155ce75f00.png"></section><section style="width: 19px;height: 19px;border: 4px solid #fdda53;border-radius: 50%;box-sizing: border-box;margin-left: auto;margin-bottom: -19px;-webkit-transform: rotate(0deg);" class="wxqq-borderBottomColor wxqq-borderTopColor wxqq-borderRightColor wxqq-borderLeftColor"></section><section style=""><section style="width:43px;margin: 0 -15px -54px auto;line-height:2px;-webkit-transform: translate(0px,30px);"><img src="https://web2.xmyeditor.com/sucai-gif/20221107/eb890643ac004a2eabcaa86c1ea13357.gif" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-gif/20221107/eb890643ac004a2eabcaa86c1ea13357.gif"></section><section style="display: flex;flex-flow: column;align-items: center;background: url(https://web2.xmyeditor.com/sucai-png/20221107/527022391447fdf07670da88a53acd35.png) no-repeat;background-size: 100% 100%;padding: 70px 30px 50px;" class="xmy-banone"><section style=""><section class="wxqq-Color" style="color: #35b38e;letter-spacing: 3px;line-height: 34px;text-align:justify;font-size: 30px;font-weight: bold;padding-left: 3px;"><p class="xmybrush" style="padding: 0px;margin: 0px;">本月的<span style="color:#fdda53">完美</span>计划</p></section></section><section style="background: #f3f8ff;padding: 0px 15px;border-radius: 20px;margin-top: 12px;" class="xmy-banone"><section class="wxqq-Color" style="color: #7fa3e6;letter-spacing: 1.5px;line-height: 26px;text-align:center;font-size: 12px;"><p class="xmybrush" style="padding: 0px;margin: 0px;">十月再见·十一月你好</p></section></section><section style="display: flex;justify-content: center;align-items: center;margin-top: 5px;"><section class="wxqq-borderTopColor" style="width: 0px;height: 0px;border-width: 6px 8px 6px;border-top-style: solid;border-top-color: transparent;border-bottom-style: solid;border-bottom-color: transparent;border-left-style: solid;border-left-color: #fdda53;border-right-style: solid;border-right-color: transparent;box-sizing: border-box;padding: 0px;"></section><section style=""><section class="wxqq-Color" style="color: #35b38e;letter-spacing: 1.5px;line-height: 26px;text-align:justify;font-size: 14px;font-weight: bold;"><p class="xmybrush" style="padding: 0px;margin: 0px;">2022/11/08</p></section></section><section class="wxqq-borderTopColor" style="width: 0px;height: 0px;border-width: 6px 8px 6px;border-top-style: solid;border-top-color: transparent;border-bottom-style: solid;border-bottom-color: transparent;border-left-style: solid;border-left-color: transparent;border-right-style: solid;border-right-color: #fdda53;box-sizing: border-box;padding: 0px;"></section></section></section><section style="width:35px;line-height:2px;margin-left: -30px;margin-top: -37px;-webkit-transform: translate(0px,-50px);"><img src="https://web2.xmyeditor.com/sucai-gif/20221107/26d5ecad344219bd9aa36259d201ffcc.gif" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-gif/20221107/26d5ecad344219bd9aa36259d201ffcc.gif"></section></section><section style="width: 15px;height: 15px;border: 4px solid #35b38e;box-sizing: border-box;border-radius: 50%;margin-top: -15px;" class="wxqq-borderBottomColor wxqq-borderTopColor wxqq-borderRightColor wxqq-borderLeftColor"></section><section style="width:50px;line-height:2px;margin-left: auto;margin-top: -50px;margin-right: -30px;"><img src="https://web2.xmyeditor.com/sucai-gif/20221107/2a513f9fa8f013b979085cec6dc076fb.gif" style="vertical-align:middle;width:100%;" class="small_image" _src="https://web2.xmyeditor.com/sucai-gif/20221107/2a513f9fa8f013b979085cec6dc076fb.gif"></section></section></section></section>'
                ],
                currentTab:0
            }
        },
      
        updated() {
            // let rich = {
            //     content: this.content
            // };

            // this.$emit("event", rich);

            // this.changeData({id:this.tempId,op:{content:this.content}})

        },
        methods:{
            ...mapActions(['addData','changeData','setContent']),

            // initData(){
            //     this.content = this.pageParam.content;
            //     this.richColor = this.pageParam.richColor;
            // },
            // handleImageAdded(file, Editor, cursorLocation, resetUploader) {
		    //     // An example of using FormData
		    //     // NOTE: Your key could be different such as:
		    //     // formData.append('file', file)
		 	// 	// let urlFile = 'http://merchant.woyoulian.com';
		 	// 	let urlFile = 'http://merchant.wstore.me';
		    //     var formData = new FormData();
		    //     formData.append('fileDate', file);
			// 	var that = this;
		 	// 	$.ajax({
		 	// 		type:"POST",
			// 		url:urlFile + "/center/design/uploadPageCover",
			// 		processData: false,
	        // 		contentType: false,
	        // 		data:formData,
	        // 		async:false,
	        // 		success:function(result){
	        // 			let url = that.imageDomaia + result; // Get url from response
			//           Editor.insertEmbed(cursorLocation, 'image', url);
			//           resetUploader();
	        // 		}
		 	// 	});
		    //   }

            clickTab(item,index){
                this.currentTab = index
                const width = this.$refs.contentRef.clientWidth
                    this.$refs.boxRef.style.transform = `translateX(${-(index*width)}px)`;
                // this.$nextTick(() => {
                //     const width = this.$refs.contentRef.clientWidth
                //     this.$refs.boxRef.style.transform = `translateX(${-(index*width)}px)`;
                // })
            },
            clickTabContent(item){
                this.setContent(true);
                let rich = {
                    content: item,
                    // resource: 'assemblePattern'
                };
                this.$emit("event", rich);
                // this.changeData({id:this.tempId,op:{content:item}})
            }
        },
        components:{
            // VueEditor,
            // TinymceEditor
        },
        mounted(){

            // this.initData();
        }
    };
</script>

<style scoped lang="scss">
    .tab{
        padding: 0;
        .header{
            display: flex;
            justify-content:space-evenly;
            align-items: center;
            // border-bottom: 1px solid grey;
            // padding-bottom: 10px;
            height: 40px;
            border-bottom: 1px solid #e6e6e6;
            .header-tab{
                font-size: 15px;
                &.active{
                    color: #166bc7;
                }
            }
        }
        .content{
            height: 380px;
            overflow: hidden;
            &:hover{
                cursor:pointer
            }
            .outer-box{
                display: flex;
                transition: transform 0.3s;
            }
            .content-box{
                box-sizing: border-box;
                padding: 12px 10px;
                width: 100%;
                flex-shrink: 0;
            }
        }
    }
</style>